<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router' // 引入 useRoute
// 定义当前选中的菜单项目，默认值为空字符串
const activeMenu = ref('')
// 获取路由实例
const router = useRouter()
// 获取当前路由信息
const route = useRoute()

// 处理菜单选择事件
const handleSelect = (key: string) => {
  activeMenu.value = key
  // 根据不同的菜单项跳转到对应的二级路径
  switch (key) {
    case 'user':
      router.push('/admin/user')
      break
    case 'board':
      router.push('/admin/board')
      break
  }
}

// 组件挂载时初始化 activeMenu
onMounted(() => {
  const pathParts = route.path.split('/')
  activeMenu.value = pathParts[pathParts.length - 1] || ''
})

// 监听路由变化，更新 activeMenu
router.afterEach(() => {
  const pathParts = route.path.split('/')
  activeMenu.value = pathParts[pathParts.length - 1] || ''
})
</script>

<template>
  <div class="flex">
    <div class="left">
      <!-- 使用 el-menu 创建菜单 -->
      <el-menu
        :default-active="activeMenu"
        class="el-menu-vertical-demo"
        @select="handleSelect"
      >
        <el-menu-item index="user">用户管理</el-menu-item>
        <!-- <el-menu-item index="board">板块管理</el-menu-item> -->
      </el-menu>
    </div>
    <div class="right">
      <RouterView />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.left {
  position: fixed; /* 固定定位 */
  top: 40%;
  z-index: 1000; /* 设置 z-index，确保菜单显示在其他内容上方 */
}

.right {
  margin-left: 100px; /* 为内容区域留出菜单的宽度 */
  flex: 1;
}
</style>
